<template>
  <div style="padding: 1rem">
    <!-- 添加按钮 -->
    <el-button style="margin-top: 1rem" type="primary" @click="showAddDialog"
      >添加</el-button
    >

    <!-- 用户管理表格 -->
    <el-table
      :data="coupon"
      border="border"
      style="width: 100%; margin-top: 1rem"
    >
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="message" label="消息内容"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
           <span style="color: #000000;" v-if="scope.row.status==='0'">未发布</span>
           <span  style="color: aqua;" v-else>已发布</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="到期时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 发布按钮 -->
          <el-button type="text" @click="publish(scope.row)">发布</el-button>
          <!-- 编辑按钮 -->
          <el-button type="text" @click="showEditDialog(scope.row)"
            >编辑</el-button
          >
          <!-- 删除按钮 -->
          <el-button type="text" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalWines"
    />
    <!-- 添加/编辑对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      @close="handleCloseDialog"
    >
      <el-form ref="userForm" :model="currentUser" label-width="80px">
        <el-form-item label="内容" prop="message">
          <el-input v-model="currentUser.message"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  update,
  deleteNotification,
  publish,
} from "@/api/notification";
import { Message } from "element-ui";
export default {
  data() {
    return {
      coupon: [], // 用户数据
      currentUser: {
        // 当前编辑的用户
        id: null,
        message: null,
      },
      dialogVisible: false,
      mode: "add",
      currentPage: 1,
      pageSize: 10,
      totalWines: 9,
      searchKeyword: "",
      options: [
        {
          value: "discount",
          label: "满减",
        },
        {
          value: "reduce",
          label: "折扣",
        },
      ],
      optionstatus: [
        {
          value: "Y",
          label: "启用",
        },
        {
          value: "N",
          label: "停止",
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadUsers();
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.loadUsers();
    },
    // 显示添加对话框
    showAddDialog() {
      this.dialogVisible = true;
      this.mode = "add";
      this.currentUser = {};
    },
    // 显示编辑对话框
    showEditDialog(row) {
      this.dialogVisible = true;
      console.log(row);
      this.currentUser = { ...row };
      this.mode = "edit";
    },

    // 关闭对话框
    handleCloseDialog() {
      this.dialogVisible = false;
    },
    async addUser() {
      const param = {
        message: this.currentUser.message,
        status: 0,
      };
      try {
        const res = await add(param);

        if (res.code === 200) {
          // 添加用户成功，显示成功提示
          Message.success("添加成功");
          this.loadUsers();
          // 其他操作...
        } else {
          // 添加用户失败，显示失败提示
          Message.error(res.message || "添加失败");
        }
      } catch (error) {
        // 异常处理
        Message.error("添加失败，请稍后重试");
      }
    },

    async editUser() {
      const param = {
        message: this.currentUser.message,
        status: 0,
      };
      try {
        const res = await update(param);

        if (res.code === 200) {
          // 添加用户成功，显示成功提示
          Message.success("添加成功");
          this.loadUsers();
        } else {
          // 添加用户失败，显示失败提示
          Message.error(res.message || "添加失败");
        }
      } catch (error) {
        // 异常处理
        Message.error("添加失败，请稍后重试");
      }
    },
    // 保存用户信息
    handleSave() {
      // 调用后端接口保存数据，示例中未实现
      // 保存成功后，刷新用户数据
      if (this.mode === "add") {
        // 执行添加用户的操作
        this.addUser();
      } else if (this.mode === "edit") {
        // 执行编辑用户的操作
        this.editUser();
      }
    },
    // 删除用户
    async handleDelete(id) {
      // 调用后端接口删除数据，示例中未实现
      // 删除成功后，刷新用户数据
      const res = await deleteNotification(id);
      if (res.code === 200) {
        // 添加用户成功，显示成功提示
        Message.success("刪除成功");
        this.loadUsers();
        // 其他操作...
      } else {
        // 添加用户失败，显示失败提示
        Message.error(res.message || "刪除失败");
      }
      this.loadUsers();
    },
    // 加载用户数据，示例中未实现
    async loadUsers() {
      // 调用后端接口获取用户数据，示例中未实现
      // 将获取到的数据赋值给 this.users
      const res = await list(this.currentPage, this.pageSize);
      if (res.code == 200) {
        this.coupon = res.data.list.records;
        this.pageSize = res.data.list.size;
        this.currentPage = res.data.list.current;
        this.totalWines = res.data.list.total;
      }
    },
    async publish(row) {
      const param = {
       id:row.id,
        notificationId: row.id,
        userId: null,
      };
      try {
        const res = await publish(param);

        if (res.code === 200) {
          // 添加用户成功，显示成功提示
          Message.success("发布成功");
          this.loadUsers();
        } else {
          // 添加用户失败，显示失败提示
          Message.error(res.message || "发布失败");
        }
      } catch (error) {
        // 异常处理
        Message.error("发布失败，请稍后重试");
      }
    },
  },
  computed: {
    dialogTitle() {
      return this.mode === "add" ? "添加" : "编辑";
    },
  },
  mounted() {},
  created() {
    // 初始化加载用户数据
    this.loadUsers();
  },
};
</script>

